<template>
	<div>
		<section style="height: 2.1rem;"></section>
		<mu-button small  @click="rightPopup=!rightPopup" style="float:right;width: 100%;" >
				{{buttonName}}
			</mu-button>
					<section style="height: 2rem;"></section>
		<mu-flex>
		<mu-slide-top-transition>
			<section v-show="rightPopup" style="background-color: white;width: 100%;display: flex;flex-direction: column;">
				<mu-row gutter>	
					<mu-col  width="40" >
						<mu-select label="选择账户" filterable v-model="orderBillNo">
							<mu-option v-for="item in orderList" :key="item.BillNo" :label="item.CustomName" :value="item.BillNo"></mu-option>
						</mu-select>
					</mu-col>
				</mu-row>
				<mu-row gutter>	
					<mu-col  width="40" >
						 <mu-date-input v-model="startTime" label="开始时间" ></mu-date-input>
					</mu-col>
				</mu-row>
				<mu-row gutter>	
					<mu-col  width="40" >
						<mu-date-input v-model="endTime" label="结束时间"></mu-date-input>
					</mu-col>
				</mu-row>
			</mu-row>			
				<section style="height: 0.1rem;"></section>
				<mu-button  @click="close('right')"> 确定</mu-button>
			</section>	  
	    </mu-slide-top-transition>
	</mu-flex>
	
	<div v-show="showList">

	<section style="width: 100%;display: flex;flex-direction: column;background-color: white;margin-top: 0.3rem;" v-for="item in list">
			<section style="justify-content: left;align-items: center;display: flex;flex-direction: row;height: 2.8rem;padding: 0 0.5rem;">
				<span style="flex: 7;text-align: left;font-size: 1.1rem;">编号：{{item.BillNo}}</span>
				<!--<mu-icon style="flex: 1;" value="keyboard_arrow_right" :size="26"/>-->
			</section>
			<section style="display: flex;flex-direction: column;justify-content: center;justify-content: left;padding: 0 0.5rem;">
				<span  class="card-item-child">车牌号：{{item.CarNo}}</span>
				<span  class="card-item-child">计量状态：{{item.Step}}</span>				
				<span  class="card-item-child">产品：{{item.ItemName}}</span>
				<span class="card-item-child">净重：{{item.QtyAcc}}</span>
				<!--<li v-if="TimeIns || TimeOut"  class="card-item-child"></li>-->
				<span v-if="item.TimeIns" class="card-item-child">进厂：{{item.TimeIns}}</span>
				<span v-if="item.TimeOut" class="card-item-child">出厂：{{item.TimeOut}}</span>
				
			</section>
			<mu-divider></mu-divider>
		</section>
		

  			</div>
     	<div v-show="!showList">
	
		<div style="width: 100%;height: 8rem;">
			
	</div>
	<div  v-show="!showList">
				<mu-circular-progress :size="24" color="blue500"/>
		</div>
		
	</div>
		
		
		
		
		<mu-dialog :open.sync="dialogOrder" title="请选择一个订单">
	    	<section class="table-title" >
		    	<span>编号</span>
		    	<span>产品</span>
		    	<span>余量</span>
		    </section>
		    <section v-for="(item,index) in orderList"
		    	 @click="moveEle(item,index)"
		    	 class="table-tr" 
		    	 :class="tableIndex==index?'choice-table-tr':''">
		    	<span>{{item.BillNo}}</span>
		    	<span>{{item.ItemName}}</span>
		    	<span >{{item.Balance}}</span>
		    </section>
		    
		    <mu-button slot="actions" @click="closeOrder('cancel')">取消</mu-button>
          <!-- <mu-flat-button slot="actions" primary @click="closeAccount('sure')" label="增加"/>-->
		</mu-dialog>
		
		

		
	</div>
</template>

<script>
	import salesCarItem from '@/pages/project/hongchang/reportForms/salesCarItem.vue'
	
	export default {
		components:{
			salesCarItem
		},
  data () {
    return {
	 buttonName:'筛选',
	  topPopup: false,
      leftPopup: false,
      rightPopup: false,
	  startTimeShow:false,
	  endTimeShow:false,
      startTime:'',
	  endTime:'',
	  noFull:false,
	  refreshing: false,
      trigger: null,
	  tableIndex:0,
	  num: 19,
	  	//list:['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19'],
	  list:[],
	  //scroller: null,
	  //loading: false,
	  
	  //orderData:{},//订单信息
	  orderBillNo:'',
	  dialogOrder: false,
	  orderList:[],
	  orderId:null,//选择的订单Id
	  showList:false,
    }
  },
  mounted () {
    //this.scroller = this.$el
     this.trigger = this.$el
     this.getSalesCarList()
	 this.getAllOrder()
     
  },
  methods: {
  	clearStartTime(){
  		this.startTime=''
  	},
  	clearEndTime(){
  		this.endTime=''
  	},
  	
  	chooseOrderDialog(){
  		this.getAllOrder()
  		this.dialogOrder=true
  	},
  	

  	moveEle(data,index){//点击订单列表选择某个
				
        this.orderId=this.orderList[index].ID
        this.orderBillNo =this.orderList[index].BillNo
		//this.orderData=data				
		console.info(data)
		//this.organizeid=this.orderList[index].OrganizeID
		this.dialogOrder = false
				
		//this.getSalesOrderListByOrderId(data.ID)
				
		//this.Balance = this.orderList[index].Balance
				
	 },
	 
	 getAllOrder(){//获得所有订单列表
				let that=this
				that.axios.post(that.global.homeSrc+'/hongchang/getAllOrder',{
					'factoryId':localStorage.factoryId,
					'uid':localStorage.uid,
					'currentpage':1
				}).then(function(response){
					console.info(response.data.data)
					that.orderList=response.data.data.list
				}).catch(function(error){
					
				})
			},
  	closeOrder(val){
			
				//console.info(this.showChoice)
				this.dialogOrder=false		
				//this.$router.go(-1)
				
				
		},
  	getSalesCarList(){
  		let that = this
  		that.axios.post(that.global.homeSrc+'/hongchang/getSalesCarList',{
  			'factoryId':localStorage.factoryId,
  			'uid':localStorage.uid, 	
  			'orderBillNo':this.orderBillNo,
  			'startTime':this.startTime,
  			'endTime':this.endTime,
  		}).then(function(response){
  			console.info(response.data.data)
  			that.showList=true
  			that.list = response.data.data.list
  		}).catch(function(error){
  			
  		})
  	},
  	
    open (position) {
      this[position + 'Popup'] = true
    },
    close (position) {
      this.getSalesCarList()
      this[position + 'Popup'] = false
    }
  },
  watch: {
    topPopup (val) {
      if (val) {
        setTimeout(() => {
          this.topPopup = false
        }, 2000)
      }
    }
  }
}
</script>

<style>
	.card-item-child{
		text-align: left;
		font-size: 0.9rem;
		height: 1.6rem;
		color: #939393;
	}
	
	.demo-popup-right {
/*  display: flex;*/
  width: 75%;
  height: 75%;
  max-width: 25rem;
  padding: 24px;
}


.left-Grant{
		flex-wrap: nowrap
	}
	.right-mu-input{
		
		margin-top: 0.6rem;
	}
	.input-add{
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		height: 2.8rem;
		flex-direction: row;
	}
	.title{
		border-bottom: 1px solid #e5e5e5;
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		height: 2.8rem;
	}
	
	.choiceBtn{
		position: absolute;
		bottom: 1rem;
		right: 1rem;
		width: 4.6rem;
		background-color: #0090FF;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 1.6rem;
		color: white;
		font-size: 0.7rem;
		border-radius: 3px;
	}
	.choice-list{
		width: 100%;
		height: 100%;
		margin-top: 0.6rem;
	}
	.choice-sec{
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: left;
		width: 100%;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		margin-top: 0.6rem;
	}
	.show-sec{
		display: flex;
		flex-direction: column;
		justify-content: left;
		width: 100%;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		margin-top: 0.6rem;
	}
	.show-sec span{
		text-align:left;
		height:2rem;
		text-indent: 0.6rem;
		line-height: 2rem;
	}
	.choice-bg{
		background: #e5e5e5;
	}
	.choice-sec span{
		text-align: left;
		font-size: 0.8rem;
		text-indent: 0.6rem;
		height:2rem;
		line-height: 2rem;
	}
	.show-list{
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: left;
		width: 100%;
		/*border: 1px solid #e5e5e5;*/
		margin-top: 1.6rem;
	}
	.show-list span{
		text-align: left;
		font-size: 0.8rem;
		text-indent: 1rem;
		height:2rem;
		line-height: 2rem;
	}
	.show-sec-input{
		height: 2rem;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center; 
		margin-bottom: 0.6rem;
		padding-right: 0.6rem;
	}
	.height-show{
		height: 2rem;
		line-height: 2rem;
	}
	.mu-text-field{
		font-size: 0.8rem!important;
	}
	.table-title{
		color: rgb(0, 144, 255);
		font-size: 0.9rem;
	}
	.table-title,.table-tr{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 2.4rem;
		border-bottom: 1px solid rgba(234,234,234,.8);
		
	}
	.table-tr{
		font-size: 0.8rem;
	}
	.choice-table-tr{
		background-color: rgba(234,234,234,.5);
	}
	.table-title span:nth-child(1),.table-tr span:nth-child(1){
		flex: 1.5;
	}
	.table-title span:nth-child(2),.table-tr span:nth-child(2){
		flex: 1;
	}
	.table-title span:nth-child(3),.table-tr span:nth-child(3){
		flex: 1;
	}


</style>